<template>
    <div class="app-container">
        <div class="form">
            <h3>宿舍财产维修申请</h3>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="宿舍" prop="dormId">
                    <el-input class="input" v-model="form.dormId" placeholder="请输入宿舍" />
                </el-form-item>
                <el-form-item label="内容" prop="context">
                    <el-input v-model="form.context" type="textarea" :rows="4" placeholder="请描述损坏物品详情" />
                </el-form-item>
                <el-form-item label="图片" prop="images">
                    <el-upload v-model:file-list="fileList" :action="uploadUrl" :multiple="true" :limit="9"
                        :before-upload="beforeUpload" :on-success="onSuccess" :on-preview="onPreview" :on-remove="onRemove"
                        list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    最多只能上传9张图片
                </el-form-item>
            </el-form>
            <el-form class="btnGroup">
                <el-button size="large" :loading="loading" type="primary" @click="submitForm">确 定</el-button>
                <el-button size="large" @click="cancel">取 消</el-button>
            </el-form>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="图片预览" />
            </el-dialog>
        </div>
        <el-divider direction="vertical" style="float: left;height:80vh" border-style="solid" />
        <div class="history" v-if="mainTainRecord">
            <h3>历史维修记录</h3>
            <el-table v-loading="loading" :data="mainTainRecord" table-layout="fixed">
                <el-table-column prop="handleTime" label="处理时间" />
                <el-table-column prop="context" :show-overflow-tooltip="true" label="损坏描述" />
            </el-table>
        </div>
    </div>
</template>

<script setup name="studentRepairProperty">
import { reactive } from 'vue';
import { ElNotification } from 'element-plus'
import { adddormPropertyMainTainApi, getDormPropertyMainTainRecordApi } from '@/api/student'
const loading = ref(false);

const data = reactive({
    form: {
        dormId: '',
        context: '',
        pictures: []
    },
    rules: {
        dormId: [{ required: true, message: "宿舍不能没有选择", trigger: "blur" }],
        context: [{ required: true, message: "损坏物品描述不能为空", trigger: "blur" }]
    },
});

const { form, rules } = toRefs(data);

const uploadUrl = reactive('http://localhost:10011/file/upload')

const fileList = ref([])

const mainTainRecord = ref([])

const { proxy } = getCurrentInstance();
/** 提交表单 */
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            loading.value = true
            console.log(form.value);
            adddormPropertyMainTainApi(form.value).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '提示',
                        message: '添加成功',
                        type: 'success'
                    })
                    loading.value = false
                    proxy.resetForm("formRef")
                    form.value.pictures = []
                    fileList.value = []
                }
            }).catch(err => {
                loading.value = false
            })
        }
    });
}

const cancel = () => {
    proxy.resetForm("formRef")
    form.value.pictures = []
    fileList.value = []
}

const beforeUpload = (file) => {
    const isJPG = file.type === "image/jpeg";
    const isPNG = file.type === "image/png";
    const isGIF = file.type === "image/gif";

    if (!isJPG && !isPNG && !isGIF) {
        proxy.$modal.msgError("请选择JPG/PNG/GIF格式的图片");
        return false;
    }

    // check image size
    const isLt10M = file.size / 1024 / 1024 < 2;
    if (!isLt10M) {
        proxy.$modal.msgError("图片必须小于2MB!");
        return false;
    }
    return true;
}

const onSuccess = (res, file, fileList) => {
    if (res.code == 200) {
        form.value.pictures.push(res.data)
    }
}

const getMainTainRecord = () => {
    getDormPropertyMainTainRecordApi().then(res => {
        if (res.code == 200) {
            let arr = []
            for (let index = 0; index < res.data.length; index++) {
                let element = res.data[index];
                arr.push({
                    "handleTime": element.handleTime,
                    "context": element.context
                })
            }
            mainTainRecord.value = arr
        }
    })

}
getMainTainRecord()

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const onPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const onRemove = (uploadFile, uploadFiles) => {
    proxy.$modal.msgError("您移除了图片" + uploadFile.name)
    form.value.pictures = form.value.pictures.filter(item => item != uploadFile.response.data)
}
</script>

<style lang='scss' scoped>
.form {
    margin-top: 4vh;
    width: 38vw;
    float: left;

    // .input {
    //     width: 30vw;
    // }

    .btnGroup {
        display: flex;
        justify-content: space-evenly;
    }
}

.form>h3 {
    text-align: center;
}

.disUoloadBtn .el-upload--picture-card {
    display: none;
}

.history {
    width: 38vw;
    float: left;
    margin-left: 1vw;
    margin-top: 4vh;
}
</style>